<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Parchment</title>
    <script src="universal.js"></script>
	<script src="ff_localStorage.js"></script>
	<script src="lib/jquery.min.js"></script>
	<script src="lib/parchment.min.js"></script>
    <script src="init.js"></script>
    <script src="lib/zmachine.min.js" defer></script>
    <script src="src/gnusto/gnusto-engine.js" defer></script>
	<script src="lib/jquery-ui-1.8.7.custom.min.js" defer></script>
	<link rel="stylesheet" type="text/css" href="styles/ui-lightness/jquery-ui-1.8.7.custom.css">
	<link rel="stylesheet" type="text/css" href="parchment.css">
	<meta name="viewport" content="width=device-width,user-scalable=no">

    <script language="javascript" defer>

        function getSelector(sText) {
            var S = document.styleSheets[1]
            var rules = S.cssRules // IE ¦¦ others
            for(var r=0;r<rules.length;r++) {
                if(rules[r].selectorText==sText) {
                    return rules[r].style
                }
            }
            return null;
        }

        function setBackgroundColor(color) {
            getSelector(".bg-default").backgroundColor = color;
            getSelector("body").backgroundColor = color;
            window.ff_localStorage.setItem("bgcolor",color);
        }

        function setForegroundColor(color) {
            getSelector(".fg-default").color = color;
            window.ff_localStorage.setItem("fgcolor",color);
        }

        $(function() {
            var hiding_menu_timeout;

            setBackgroundColor(window.ff_localStorage.getItem("bgcolor") || "white");
            setForegroundColor(window.ff_localStorage.getItem("fgcolor") || "black");

            $("html").click(function() { $("input")[0].focus(); }); // alway refocus to the input line 

            // show/hide the color selector
            $("#color_menu_wrapper").mouseover(function() {
                $("#color_menu").slideDown();
                clearTimeout(hiding_menu_timeout);
            });
            $("#color_menu_wrapper").mouseout(function() {
                hiding_menu_timeout = setTimeout(function() { $("#color_menu").slideUp(); }, 300);
            });

            // show/hide the left-hand menu
            $("#link_menu_wrapper").mouseover(function() {
                $("#link_menu").slideDown();
                clearTimeout(hiding_menu_timeout);
            });
            $("#link_menu_wrapper").mouseout(function() {
                hiding_menu_timeout = setTimeout(function() { $("#link_menu").slideUp(); }, 300);
            });

            // add the download link
            url = decodeURI(window.location.search.substring(window.location.search.indexOf('search=')+8));
            games = ff_localStorage.getItem("games");
            if(!games[url] || !games[url]["local"]) {
                $("#download_link").attr("href", url);
            } else {
                $("#download_link").attr("href", "data:x-zmachine;base64," + games[url]['data']);
            }

            setTimeout(function() { $("#color_menu").slideUp(); }, 700);
            setTimeout(function() { $("#link_menu").slideUp(); }, 700);
        });
    </script>
</head>
<body>
    <div id="color_menu_wrapper">
        <div id="color_menu">
            <div class="color-box" style="background-color: white; color: black;" onclick="setBackgroundColor('white'); setForegroundColor('black');">>_</div>
            <div class="color-box" style="background-color: #ffffc2; color: black;" onclick="setBackgroundColor('#ffffc2'); setForegroundColor('black');">>_</div>
            <div class="color-box" style="background-color: blue; color: white;" onclick="setBackgroundColor('blue'); setForegroundColor('white');">>_</div>
            <div class="color-box" style="background-color: black; color: white;" onclick="setBackgroundColor('black'); setForegroundColor('white');">>_</div>
        </div>
    </div>
    <div id="link_menu_wrapper">
        <div id="link_menu">
            <div class="link-box"><a href="home.html" target="_blank" class="menu-link">Open main menu</a></div>
            <div class="link-box"><a href="" id="download_link" class="menu-link">Download game</a></div>
        </div>
    </div>
	<div id="about">
		<h1>Parchment</h1>
		<p>is an interpreter for Interactive Fiction. <a href="http://parchment.googlecode.com">Find out more.</a></p>
		<noscript><p>Parchment requires Javascript. Please enable it in your browser.</p></noscript>
	</div>
	<div id="parchment"></div>
</body>
</html>
